<script setup>
// 因为websocket传输数据量的限制，不一次获取所有试题，增量获取
//进入页面会马上进行连接，必须在进入页面前选定必要的参数(examId)
// 左边是我(蓝方)，右边敌人(红方)
import {useWebSocket} from '@vueuse/core'
import {ref, watch} from 'vue'
import useCookieStorage from "@/stores/cookieStorage.js";
import {ElMessage} from "element-plus";
import useUserStore from "@/stores/user.js";


const cookieStorage = useCookieStorage()
// 定义状态常量
const WS_STATUS = {
  CONNECTING: 'CONNECTING',
  OPEN: 'OPEN',
  // CLOSING: 'CLOSING',
  CLOSED: 'CLOSED'
}
const firstType = {
  1: "单选题",
  2: "多选题",
  3: "判断题",
  4: "填空题",
  5: "简答题",
  6: "组合题",
  7: "不定项选择题"
}

const userStore = useUserStore()
const pkStatus = {
  match_success: "match_success",
  match_fail: "match_fail",
  other_not_online: "other_not_online",

  match_waiting: "match_waiting",
  disconnection: "disconnection",
  answer_result: "answer_result",
  answer_send: "answer_send",

  question_send: "question_send",
  ready: "ready",
  give_up: "give_up",
  save_one: "save_one",
  update_progress: "update_progress",
  update_error: "update_error",
  finished: "finished",
  reconnect_success: "reconnect_success",
  time_out:"time_out"
}

const pkMode = ref("普通模式")

const startConnect = ref(false)
const countdownValue = ref(0)
const timeValue = ref(0)
// 定义连接状态
const connectionStatus = ref('未连接')
const errorMessage = ref('')
const maxReconnectAttempts = 1
const currentIndex = ref(0)
let roomId=null;

// cookieStorage.userId
// 使用 VueUse 的 useWebSocket，添加事件监听
let otherUser = ref(null)

// close可以指定code与原因
const {
  status,
  data,
  send,
  close,
  open,
  ws
} = useWebSocket(`ws://localhost:26001/websocket/pk?userId=${cookieStorage.userId}&examId=36&type=common`, {
  // 自动重连配置
  autoReconnect: {
    retries: maxReconnectAttempts,
    delay: 3000,
    onFailed() {
      connectionStatus.value = '重连失败，连接已断开'
    }
  },
  // 心跳检测
  heartbeat: {
    message: '{"type":"ping"}',
    interval: 30000,
    pongTimeout: 10000
  }
})
const doNum1 = ref(0)
const doNum2 = ref(0)
const myScore = ref(0)
const otherScore = ref(0)
// 监听连接成功
const onConnected = () => {
  connectionStatus.value = '连接成功'
  // 可以在这里触发一些业务逻辑
}

const questions = ref([])
const reConnect = ref(false)
let intervalIds = []

const percent1 = computed(() => {
  if (questions.value.length === 0) return 0;
  return Math.ceil(doNum1.value / questions.value.length * 100);
})
const percent2 = computed(() => {
  if (questions.value.length === 0) return 0;
  return Math.ceil(doNum2.value / questions.value.length * 100);
})
const canSave=computed(()=>{
  if(questions.value.length===0) return false;
  return questions.value[currentIndex.value].finished?? false;
})
// 监听连接失败
const onConnectionFailed = (error) => {
  connectionStatus.value = '连接失败'
  errorMessage.value = error.message || '未知错误'
  console.error('WebSocket 连接失败:', error)
}

// 监听连接断开
const onDisconnected = (event) => {
  // 区分主动断开和被动断开
  if (event.wasClean) {
    // connectionStatus.value = '主动断开连接'
    console.log('主动断开连接，关闭代码:', event.code, '原因:', event.reason)
    //   如果是对手弃权，则结束PK
    if (event.reason === '您的对手弃权') {
      ElMessage.success({
        message: '对手放弃PK,您赢得这场比赛',
        type: 'success',
      });

    }
  } else {

  }
  doNum1.value=0
  doNum2.value=0
  questions.value = []
  countdownValue.value=0;
  otherUser.value = null
  connectionStatus.value = '连接已断开'
}

// 监听错误事件
const onError = (error) => {
  connectionStatus.value = '连接出错'
  errorMessage.value = error.message || 'WebSocket 发生错误'
  console.error('WebSocket 错误:', error)
}

// 普通模式下，很好判断是最后一道题，竞速模式下，则已做完所有题为依据
// 到0时，如果这道题是最后的题时，则结束PK，如果不是最后一道题，则提交该题记录，等待后端响应返回下一道题
watch(timeValue, (newVal) => {
  // if (true) {
  //   saveOneQuestion()
  //   finishPk()
  // } else {
  //   saveOneQuestion()
  // }
})
// 监听 status 变化
watch(status, (newStatus) => {
  switch (newStatus) {
    case WS_STATUS.CONNECTING:
      connectionStatus.value = '正在连接...'
      break
    case WS_STATUS.OPEN:
      // onConnected()
      break
    case WS_STATUS.CLOSED:
      // 这里不直接处理，通过 onDisconnected 处理
      break
  }
})

// 监听 WebSocket 原生事件
watch(ws, (newWs) => {
  if (newWs) {
    // 添加事件监听器
    newWs.addEventListener('open', onConnected)
    newWs.addEventListener('error', onError)
    newWs.addEventListener('close', onDisconnected)
  }
}, {immediate: true})

// 监听收到的数据
watch(data, (newData) => {
  if (newData) {
    try {
      const message = JSON.parse(newData)
      handleMessage(message)
    } catch (e) {
      console.warn('解析消息失败:', newData)
    }
  }
})

const handleMessage = (message) => {
  if(message==="ok"){
    return;
  }
  switch (message.status) {
    case pkStatus.other_not_online:
      errorMessage.value = '对方未在线'
      break;
    case pkStatus.match_success:
      handleMatchSuccess(message)
      break
    case pkStatus.reconnect_success:
      handleReconnectSuccess(message)
      break
    case pkStatus.question_send:
      handleQuestionSend(message)
      break
    case pkStatus.ready:
      handleReady(message)
      break
    case pkStatus.save_one:
      handleSaveOne(message)
      break
    case pkStatus.time_out:
      handleTimeOut(message)
      break
    case 'error':
      errorMessage.value = message.message || '服务器返回错误'
      break
    default:
      console.log('收到未知类型消息:', message)
  }
}
function handleTimeOut(message) {
//     渲染下一道题与双方进度

}

function handleMatchSuccess(message) {
  otherUser.value = message.data.data
  roomId=message.roomId
  //   获取试题
  sendMessage({
    ...message,
    status: pkStatus.question_send
  })
}

function handleQuestionSend(message) {
  // 每道题的状态有已完成未完成
  message.data.forEach(ele => {
    ele.finished = false
    ele.answer=null
  })
  questions.value = message.data
//   渲染题目，题目渲染完成后通知开始
  sendMessage({
    ...message,
    status: pkStatus.ready,
    otherUser: otherUser.value
  })
}
function handleSaveOne(message) {
  // 去掉之前的定时器
  intervalIds.forEach(id=>clearInterval(id))
  if (message.data.stage === "initial") {
    doNum1.value = message.data.myNum
    myScore.value = message.data.myScore
    doNum2.value = message.data.otherNum
    otherScore.value = message.data.otherScore
    //   初始化题目
    //   questions.push(1)
    //   questions.value.push({})
    // todo 将获取到的试题数据插入到答题卡
    questions.value[currentIndex.value].data = message.data.question

    //   时间戳
    let calculate=Math.ceil((message.data.time+20*1000-(new Date().getTime()))/1000);
    if(calculate>0){
      timeValue.value=calculate;
      intervalIds.push(setInterval(() => {
        timeValue.value--;
        if(timeValue.value<=0){
          intervalIds.forEach(id=>clearInterval(id))
        }
      },1000))
    }
  }else if(message.data.stage === "normal"){
    currentIndex.value++
    doNum1.value = message.data.myNum
    myScore.value = message.data.myScore
    doNum2.value = message.data.otherNum
    otherScore.value = message.data.otherScore
    questions.value[currentIndex.value].data = message.data.question
    let calculate=Math.ceil((message.data.time+20*1000-(new Date().getTime()))/1000);
    if(calculate>0){
      timeValue.value=calculate;
      intervalIds.push(setInterval(() => {
        timeValue.value--;
        if(timeValue.value<=0){
          intervalIds.forEach(id=>clearInterval(id))
        }
      },1000))
    }
  }
}

function handleReconnectSuccess(message) {
  reConnect.value = true;
  otherUser.value = message.data.data;
  roomId=message.roomId
  sendMessage({
    ...message,
    status: pkStatus.question_send
  })
}




// 发送消息
const sendMessage = (message) => {
  if (status.value === WS_STATUS.OPEN) {
    send(JSON.stringify(message))
  } else {
    console.warn('WebSocket 未连接，无法发送消息')
  }
}


// 主动断开连接
const disconnect = () => {
  connectionStatus.value = '正在主动断开...'
  close()
}



// 开始倒计时
function handleReady(message) {
  if (new Date().getTime() < (message.data.startTime + 10 * 60 * 1000)) {
    countdownValue.value = message.data.startTime + 10 * 60 * 1000;
  }
//   根据之前的做题记录，重新开始获取题目，携带自己当前的分数与
//   如果结束时再次刷新会不会有事务问题
  if (doNum1.value === 0) {
    sendMessage({
      ...message,
      status: pkStatus.save_one,
      otherUser: otherUser.value,
      nextQuestionId: questions.value[currentIndex.value].id,
      stage: "initial",
      jumpQuestionId:questions.value[currentIndex.value+1]?.id,
      saveData: null,
      // saveDataTemp: {
      //   questionId: "",
      //   answer:"",
      // },
      score: 0,
      doNum: 0
    })
  } else {

  }
}


function giveUp() {
  //     退出房间并断开连接
  sendMessage({
    status: pkStatus.give_up,
    otherUser: otherUser.value
  })
  questions.value = [];
  otherUser.value = null;
  countdownValue.value=0
}

function finishPk() {

}

function nextQuestion() {

}

function preQuestion() {

}


function timeEnd() {
  // console.log("时间结束，如果时间初始为0，或者小于0，会触发吗？会触发的")
  if (status.value === WS_STATUS.OPEN) {
    // 如果已结束，则关闭，后端判断关闭
  }
}

function jumpTo() {
  // document.getElementById('test50').scrollIntoView({
  //   behavior: 'smooth',    // 平滑滚动
  //   block: 'start',        // 元素顶部对齐到视口顶部
  //   inline: 'nearest'      // 水平方向最近对齐
  // });
}
function saveRecords(){
  if(currentIndex.value===questions.value.length-1){
    sendMessage({
      roomId: roomId,
      type:pkMode.value==="普通模式"?"common":"first_done",
      status: pkStatus.save_one,
      otherUser: otherUser.value,
      nextQuestionId: questions.value[currentIndex.value+1].id,
      stage: "last",
      jumpQuestionId:questions.value[currentIndex.value+2]?.id,
      saveData: {
        questionId: questions.value[currentIndex.value].id,
        answer: questions.value[currentIndex.value].answer,
      },
      answer: questions.value[currentIndex.value].answer,
      score: 0,
      doNum: 0
    })
  }else{
    questions.value[currentIndex.value].finished=true
    sendMessage({
      roomId: roomId,
      type:pkMode.value==="普通模式"?"common":"first_done",
      status: pkStatus.save_one,
      otherUser: otherUser.value,
      nextQuestionId: questions.value[currentIndex.value+1].id,
      stage: "normal",
      jumpQuestionId:questions.value[currentIndex.value+2]?.id,
      saveData: {
        questionId: questions.value[currentIndex.value].id,
        answer: questions.value[currentIndex.value].answer,
      },
      answer: questions.value[currentIndex.value].answer,
      score: myScore.value,
      doNum: doNum1.value
    })
  }

}
function selectOption(item,index){
  questions.value[currentIndex.value].answer=item.option

}
</script>

<template>
  <div class="websocket-pk">
    <!--    20秒一道题-->
    <div class="status-and-btns">
      <div>
        当前连接状态：<span :class="{green: status === WS_STATUS.OPEN}">{{ connectionStatus }}</span>
      </div>
      <div>
        {{ pkMode }}
      </div>
      <div>
        <el-button @click="open" v-if="status===WS_STATUS.CLOSED">开始pk</el-button>
        <el-button @click="giveUp" v-else>结束pk</el-button>
      </div>

    </div>

    <!--    剩余时间由当前时间戳减去 服务端生成的开始时间,10分钟-->
    <div style="text-align: center">
      <el-countdown title="倒计时" :value="countdownValue" @finish="timeEnd"/>
    </div>
    <div class="pk-container">
      <div class="left-me">
        <img :src="userStore.userInfo.header" class="left-img">
        <span>我</span>
        <div class="progress-container">
          <el-progress :percentage="percent1"/>
          {{doNum1}}{{doNum2}}
        </div>
        <span>分数:{{ myScore }}</span>
        <span>当前试题结果</span>
      </div>
      <div class="pk-question" v-if="questions.length>0">
        <div v-if="questions[currentIndex].data">
          <div class="stem">
            <span>{{currentIndex+1}}{{firstType[questions[currentIndex].data.firstType]}}（{{questions[currentIndex].data.firstType===2?2:1}}分）、
            </span>
            <div class="stem-content" v-html="questions[currentIndex].data.stem[0].vl"></div>
          </div>
          <div class="options-container">
            <div class="click-option" @click="selectOption(item,index)" v-for="(item,index) in questions[currentIndex].data.quOption" :key="index" :class="{
              selected: item.option===questions[currentIndex].answer,
            }">
              <span>{{item.option}}、</span>
              <span>{{item.content[0].vl}}</span>
            </div>
          </div>
          <div class="question-down-time">
            <span>{{ timeValue }}</span>
          </div>
        </div>


      </div>
      <div class="pk-question prepare" v-else>
        <div class="animate">
          <svg t="1755913666573" class="icon" viewBox="0 0 3074 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6487" width="200" height="200">
            <path
                d="M2604.41764005 157.32326215c-4.73951498-0.36061548-9.60782032-0.51516515-14.65643342-0.51516514h-135.95195012V144.80476111l-51.51646485-51.51646484h-136.51863143v63.54555882h-177.98938624q-133.4018849 0-136.51863142 139.76416953v476.52729773l51.51646485 51.51646484h238.26364886c7.93353572 0 13.39428045-0.51516515 17.12922564-0.51516393 5.1516466 0 6.95472279 0.95305486 7.57292024 5.35771243V855.73197336l51.51646484 51.51646485h136.51863143v-82.60665102H2765.14901028V344.9462268c0-91.0295926 0-187.62296464-160.73137023-187.62296465z m150.42807701 187.62296465V806.79133181l-41.21317162-41.21317163V293.42976195q0-90.15381318-54.09228815-120.88338508c95.30545979 19.49898191 95.30545979 94.0690649 95.30545977 172.39984993z m-615.62175244-42.0631942h-0.72123096l-41.21317165-41.21317162h85.72339755q63.41676844 0 78.17623537 43.37686329a153.49330618 153.49330618 0 0 0-26.65977053-2.16369167z m0 10.30329322h95.30545978a137.52320242 137.52320242 0 0 1 29.51893387 2.88492263 113.59380487 113.59380487 0 0 1 1.5712523 25.01124278v333.56910865h-126.31837173z m-51.51646486-46.51936791l41.21317165 41.21317163V674.65159988h-41.21317165z m409.81347624-4.99709693q57.18327538 0 73.20489651 42.88745745a133.94280812 133.94280812 0 0 0-21.68843165-1.67428583h-98.24189736l-41.21317285-41.21317162z m-43.78899494 51.51646484h95.3054598a117.17419918 117.17419918 0 0 1 24.98548591 2.57582331 128.04417248 128.04417248 0 0 1 2.93643878 28.59163829V674.65159988h-123.15010904z m-51.51646484-44.25264272l41.21317285 41.21317164V674.65159988h-41.21317285z m41.21317285-119.853056v7.72746991h-41.21317285v-48.94064155z m-185.45927298 664.74270295c-1.77731811 0-3.7091859 0-5.95015179 0.20606582-2.98795493 0.15454966-6.72289891 0.30909933-11.17907383 0.30909811h-233.85899129l-41.21317164-41.21317163h223.68448967q64.75619564 0 74.49280876 41.21317163a26.17036466 26.17036466 0 0 0-5.8471195-0.51516393z m22.30662911 41.90864331H2395.00321145l41.21317164 41.21317284h-114.72716625z m163.22991809-41.39347938v75.31707202l-41.21317163-41.21317163v-75.31707202H2706.67782264l41.21317163 41.21317163H2443.50596329zM1005.1662687 750.89596869V716.63751863h120.72883541v-104.83600467l-51.51646485-51.51646485h-69.21237056v-40.62073226h117.56057274v-7.72746991l0.69547168-0.6954729-0.69547168-0.69547167v-95.71759141l-51.51646485-51.51646485h-66.04410789v-43.78899495h136.51863142V211.51858261l-51.51646485-51.51646486h-85.00216657V144.80476111l-51.51646485-51.51646484h-136.51863143v66.71382148h-39.07523803l1.57125231-5.66681053-51.51646487-51.51646485h-133.42764418q-18.03076313 51.20736551-78.87170704 122.24857035V221.04912871A59.55303287 59.55303287 0 0 0 498.91397008 178.29046284l-2.57582331-2.5758233-49.7649048-49.73914673c-1.39094457-1.39094457-2.83340527-2.78188912-4.3788995-4.09555823a64.70467948 64.70467948 0 0 0-47.65272929-19.06109221Q362.67867871 102.81884237 343.69486194 121.87993458A60.14547225 60.14547225 0 0 0 321.46550706 169.53266386a60.14547225 60.14547225 0 0 0 22.22935488 47.65273049c1.4424607 1.4424607 2.93643878 2.78188912 4.48193301 4.06980017l44.76780666 45.82389502 0.25758317-0.20606581c0.6697136 0.64395552 1.33942841 1.23639489 2.03490008 1.82883426q18.95805869 19.08685027 50.82099197 22.25511296 25.37185826 0 47.65273049-22.25511296a65.60621819 65.60621819 0 0 0 15.19735664-18.52016898v125.85472394l-41.21317163-41.21317162H346.8888827l-19.06109221 517.74046935 51.51646485 51.51646486h120.70307734l19.06109099-517.74046937-2.26672398-2.26672518L553.28959828 347.44477466V855.73197336l51.51646484 51.51646485h473.4363105q63.51980074 0 63.54556002-69.88208417V802.41243233l-51.51646485-51.51646364zM486.98790842 260.87135578l-0.28334004 0.25758197-0.28334126 0.28334125c-12.87911651 12.87911651-25.75823182 19.08685027-39.87374323 19.24139994-18.6232025-1.93186779-33.02205394-8.21687577-44.02081883-19.24139994l-0.30909932-0.28334125-0.30909813-0.28334005a19.98838777 19.98838777 0 0 1-1.57125229-1.41670263 50.3315861 50.3315861 0 0 1-14.11551141-21.04447613c2.75613104 0.48940586 5.56377824 0.9015387 8.50021581 1.18487875q25.37185826 0 47.6527305-22.22935488A60.30002191 60.30002191 0 0 0 464.42369735 169.53266386v-2.26672397a52.59831008 52.59831008 0 0 1 21.89449746 13.42003852l0.25758198 0.25758196 0.30909933 0.25758319c0.95305486 0.82426326 1.64852653 1.4424607 2.13793238 1.93186656l2.5758233 2.39551678A49.22398159 49.22398159 0 0 1 505.63686899 221.04912871a49.97097062 49.97097062 0 0 1-18.64896057 39.82222707zM342.3811916 852.56371068H441.24128762l41.21317164 41.21317286H383.59436446z m147.98104531 34.5417901L448.7884498 845.42868136l18.28834509-496.74751181 41.57378711 41.57378712z m463.28756694-136.20953209v-78.4853347l41.21317165 41.21317163v37.27216307zM741.50500228 319.52285116h63.51980075c4.2501079 0 8.21687577 0.20606581 12.02909516 0.54092322v43.24807173h-75.54889591v-43.78899495z m-10.30329321 0v43.78899495h-41.21317163V275.29596652l41.21317163 41.21317164z m-41.21317163 240.76219795v-84.84761813l41.21317163 41.21317164v43.63444649z m51.51646484-40.62073226h63.51980075c4.2501079 0 8.21687577 0.20606581 12.02909516 0.540922v40.07981026h-75.54889591z m63.51980075-10.30329322h-66.55927182l-41.21317164-41.21317164h56.25597861q59.39848321 0 63.26221877 41.65106135a153.72513007 153.72513007 0 0 0-11.74575392-0.43788971z m-115.03626559-41.21317164z m0 196.97320301z m63.51980074 0q61.4333845 0 63.41676843 41.62530327c-3.76070205-0.25758196-7.72746991-0.41213164-11.90030358-0.41213164h-66.55927182l-41.21317164-41.21317163z m-12.0033359 51.51646363h63.51980075c4.2501079 0 8.21687577 0.18030774 12.02909516 0.48940707v33.76904299h-75.54889591z m12.0033359-448.63113231q59.39848321 0 63.26221877 41.65106134a153.72513007 153.72513007 0 0 0-11.74575392-0.4378897H738.49128928l-41.21317164-41.21317164z m-63.51980074 0z m0 404.40424767l41.21317163 41.21317163v37.27216307h-41.21317163z m392.16908789-404.40424767l41.21317163 41.21317164h-121.21824126l-41.21317165-41.21317164z m-16.27920308 200.14146567l41.21317163 41.21317164h-104.93903818l-41.21317165-41.21317164z m1.26215297 196.97320301l41.21317284 41.21317163h-106.20119236l-41.21317165-41.21317163z m-113.3362217 0z m0-196.97320301z m0-200.14146567zM1115.59181091 616.18041345v82.96726649l-41.21317165-41.21317284V574.96724182z m-161.94200706-55.89536434v-84.84761813l41.21317165 41.21317164v43.63444649z m158.77374438-141.18087218V500.26836724l-41.21317164-41.21317164v-81.1641903z m-158.77374438-55.79233082V275.29596652l41.21317165 41.21317164v46.80270795z m177.73180307-147.51739631v86.95979242l-41.21317165-41.21317284V174.58127816z m-136.51863142-66.7138227v10.92149065h-41.21317165V107.86745546zM726.64250184 115.9040247l41.44499675 41.47075361-0.74698905 2.5758233h-55.12261723l11.79727008-42.42380845zM1131.48464043 806.79133181v30.67805575c0 20.60658642-4.45617372 35.82970114-13.21397393 45.46327954S1096.53071871 896.9451462 1078.24237362 896.9451462H609.15920454l-41.21317164-41.21317284H1026.72590876q63.51980074 0 63.54556003-69.88208416V765.57816018z"
                fill="#27ae07" p-id="6488"></path>
            <path
                d="M1890.83733028 395.09750516H1798.70013316c-3.91525171-0.46364778-7.72746991-0.97881293-11.66847969-1.51973615l136.26104946-108.9830815c19.0610922-55.04534301 4.73951498-156.35247073-92.72963649-156.35246952H1392.08067647l-19.06109099-19.06109219H1245.92846664a243.31226317 243.31226317 0 0 1-101.66774321 57.18327538v123.89709809l26.76280282 26.76280282c-0.43788971 0.61819745-0.92729678 1.21063682-1.36518527 1.82883427q-66.73957956 76.24436758 3.16826266 155.65699906l51.51646365 51.51646485c4.63648146 2.83340527 9.29872221 5.51226209 13.93520367 8.01080995q-81.2672226 12.59577526-81.29298068 92.96146038v225.56484008l51.51646484 51.51646486h721.23050546v-231.82409123q0-62.6697794-55.30292497-81.18994837a71.01544675 71.01544675 0 0 0-19.62777229-33.17660239h87.57798988v-111.27556354l-51.51646484-51.51646485z m10.303292-223.47842385c21.55964006 30.31743905 22.9763427 75.98678562 13.29124814 106.84514789l-141.30966255 113.02712357a490.56553491 490.56553491 0 0 1-76.16709336-18.64896056l174.74384813-139.76416954q21.94601362-63.46828459-14.27005986-91.28717456a75.31707082 75.31707082 0 0 1 43.7374788 29.8280332zM1579.49757529 306.12857071L1475.43431652 278.23240409h140.89753091z m-289.08464205 60.37729615a135.66861008 135.66861008 0 0 1 47.65273051-9.53054611q34.87664628 0 54.09228815 9.53054611 22.22935487 3.16826268 60.37729615 19.0610922-24.21273881 8.08808539-42.0374349 13.57458819c-6.46531572-0.61819745-13.3427643-0.95305486-20.81265225-0.95305485a146.30675949 146.30675949 0 0 0-50.74371774 9.9684358c-2.26672398 0.59243937-5.33195435 1.39094457-8.65476547 2.5758233a142.88091485 142.88091485 0 0 1-39.77071093-9.22144677c-16.97467475-4.22434983-25.42337563-10.56087518-25.42337562-19.0610922-0.10303351-6.41379957 8.34566736-11.69423777 25.3203421-15.94434567zM1377.55303343 128.24221799h-14.14126949l8.3971835-5.74408597zM1157.73227931 289.05086245l3.4773608-4.89406464q79.00049863-28.5916383 116.4787263-57.44085856H1684.33358118l-54.34987011 41.21317284h-200.55359732a519.20868935 519.20868935 0 0 0-151.74174734 0q-69.54722676 8.34566736-100.07073164 41.03286389z m586.95283993 369.63063368h-158.82526052V623.90788215h114.36655199c29.62196738-2.08641623 44.45870853 6.33652534 44.45870853 25.39761755z m-41.21317163 79.43838833q41.21317164 0 41.21317163 19.06109221v9.5305461h-158.82526052v-28.59163831z m-247.79419496-79.43838833h-165.26481941V623.90788215h114.366552q50.76947581-3.1425046 50.82099318 25.39761755z m-165.18754396 79.43838833h114.36655199q50.76947581 0 50.82099197 19.06109221v9.5305461h-165.26481941zM1171.48717524 852.56371068h699.36176606l41.21317165 41.21317286H1212.70034689zM1895.29350401 613.60459015c16.12465342 12.87911651 23.95515563 32.09475717 23.95515562 58.67725346v214.30849202l-41.21317164-41.21317164v-224.74057682a122.04250453 122.04250453 0 0 0-1.26215296-17.77317994A74.18370943 74.18370943 0 0 1 1895.29350401 613.60459015z m-345.80426966-81.91117934l68.82599701-27.89616542 60.35153807 25.42337563c1.80307619 0.82426326 3.73494397 1.64852653 5.74408598 2.57582331z m217.45099785 0h-47.78152089a203.49003609 203.49003609 0 0 1-36.06152502-11.82302815h-0.30909933l-60.5318458-25.57792529-3.86373436-1.75156004-3.96676786 1.59701038-92.34326292 37.5555031h-250.73063376c-4.73951498 0-9.35023836 0.12879158-13.78065521 0.36061548a255.18680747 255.18680747 0 0 1-26.47946278-14.01247911 166.78455433 166.78455433 0 0 1-16.82012509-22.82179303 199.60054245 199.60054245 0 0 0 72.94731332 14.24430178 462.64361142 462.64361142 0 0 0 162.01928248-9.5305461l117.56057153-47.65272928 60.35153929 25.39761755q41.21317164 19.08685027 146.12645174 28.59163708h110.27099254l41.21317163 41.21317164h-83.92032135q-27.1234183-15.76403794-73.90036816-15.78979601z m124.79863557-121.0636916l40.31163415 40.28587485v89.27803376l-41.21317164-41.21317162v-87.2431337z"
                fill="#27ae07" p-id="6489"></path>
          </svg>
        </div>
      </div>
      <div class="right-other">
        <img v-if="otherUser" :src="otherUser.header" class="left-img">
        <span v-if="otherUser">{{ otherUser.name }}</span>
        <div class="progress-container">
          <el-progress :percentage="percent2"/>
        </div>

        <span>分数:{{ otherScore }}</span>
        <span>试题结果</span>
      </div>
    </div>
    <div class="aaa">
      <div class="card-container">
        <el-scrollbar>
          <div class="scrollbar-flex-content">
            <p v-for="(item,index) in questions" :key="index" class="scrollbar-demo-item" :id="'test'+index">
              {{ index }}
            </p>
          </div>
        </el-scrollbar>
      </div>

    </div>
    <div>
      <span v-if="questions.length>0">
        <el-button @click="saveRecords" :disabled="questions[currentIndex].finished">确定</el-button>
      </span>

      <el-button @click="nextQuestion">上一题</el-button>
      <el-button @click="jumpTo">答题卡</el-button>
      <el-button @click="preQuestion">下一题</el-button>
    </div>
  </div>
</template>

<style scoped>

.websocket-pk {

  padding: 20px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
}

.websocket-pk ::v-deep(.el-statistic) {
  --el-statistic-title-color: #ff0000;
}

.scrollbar-flex-content {
  display: flex;
  width: fit-content;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.card-container {
  width: 500px;
}

.aaa {
  display: flex;
  justify-content: center;
}

.status-and-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-and-btns .green {
  color: green;
}

.pk-question {
  flex: 4;
  border-radius: 12px;
  box-shadow: 0 0 10px rgb(180, 200, 251);
  padding: 16px;
}
.pk-question .stem{
  display: flex;
  align-items: flex-start;
}
.pk-question .stem .stem-content{
  flex: 1;
}
.pk-question.prepare {
  display: flex;
  justify-content: center;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pk-question.prepare .animate {
  animation: loading 1s linear infinite;
}

.left-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  box-shadow: 0 0 10px #409eff;
}

.connection-info {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.status {
  font-weight: bold;
  color: #007bff;
}

.error {
  color: #dc3545;
  font-weight: bold;
}

.controls {
  margin: 20px 0;
}

button {
  margin: 5px;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

.messages {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.messages pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.reconnect-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
}

.pk-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.left-me {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.right-other {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-container {
  width: 200px;
}
.options-container{
  padding: 20px 0;
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.click-option{
  padding: 16px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow:  0 0 8px #78b8fa;
}
.click-option.selected{
  background: #78b8fa;
  color: white;
}
.question-down-time{
  text-align: center;
  font-size: 28px;

  font-weight: bolder;
  color: red;
}
</style>
